<template>
  <mk-content>
    <div class="edit">
      <el-card class="edit-left">
        <template #header>
          <el-tooltip
              effect="dark"
              content="更改视频名称"
              placement="top">
            <el-input value="我的视频1"></el-input>
          </el-tooltip>
        </template>
        <div>
          <img width="100%" src="https://public-server.aimeike.tv/theme/10083/thumbnail.jpg" alt="">
        </div>
        <van-cell-group>
          <van-cell title="模版名称11" is-link value="更换模板" />
          <van-cell title="模版滤镜">
            <template #right-icon>
              <van-icon name="photo-o" />
            </template>
          </van-cell>
          <van-cell title="添加配音" >
            <template #right-icon>
              <i class="el-icon-microphone"></i>
            </template>
          </van-cell>
          <van-cell title="估计时长" value="6：18" />
        </van-cell-group>
        <el-button plain type="primary">
          预览
        </el-button>
        <div style="margin-top: 10px">
          <el-button>
            存草稿
          </el-button>
        </div>
      </el-card>
      <el-card class="edit-right">
        <template #header>
          <div>
            123
          </div>
        </template>
          <vuedraggable
              :options="{group:'title', animation:500}"
              class="wrapper" v-model="list">
            <transition-group >
              <div v-for="(item,index) in list" :key="index" class="item">
                <editContent :type="item.type"></editContent>
              </div>
            </transition-group>
          </vuedraggable>
      </el-card>
    </div>
  </mk-content>
</template>

<script>
import vuedraggable from 'vuedraggable';
import editContent from "@/components/editContent";
export default {
  name: "editVideo",
  components:{vuedraggable,editContent},
  data() {
    return {
      list: [{
        type:'img'
      },{
        type:'video'
      },{
        type:'img'
      }, {
        type:'video'
      }]
    }
  },
}
</script>

<style scoped>
.wrapper span{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item{
  /*width: 100px;*/
  /*height: 100px;*/
  margin: 20px;
  background-color: red;
}
.el-button{
  width: 100%;
}
.van-cell{
  padding: 10px 0px;
}
.edit{
  display: flex;
  justify-content: space-between;
  background-color: #999;
}
.edit-left{
  width: 300px;
}
.edit-right{
  width: calc(100% - 320px);
}
</style>
